<template>
<div>
    <!--鼠标右键菜单栏 -->
    <div v-show="showRightMenu">
      <ul id="menu" @mouseleave="leaveMenu" class="right-menu">
        <li class="menu-item" @click="addDevHandle">add</li>
        <li class="menu-item" @click="editDevHandle">edit</li>
        <li class="menu-item" @click="delDevHandle">del</li>
      </ul>
    </div>
    <div class="title">
      <div class="titleText">NeeDo</div>
      <div class="placeholder">|</div>
    </div>
    <el-tree
      class="needo-tree"
      :data="needoTreeData"
      :props="defaultProps"
      ref="tree"
      node-key="id"
      draggable
      highlight-current
      default-expand-all
      @current-change="nodeClick"
      @node-contextmenu="rightClick"
      @node-click="leftClick"
    >
      <template #default="{ node, data }">
        <div class="needoContent" @click="kkp(data)">
          {{ node.label }}
        </div>
      </template>
    </el-tree>
    <el-button @click="addNeedoItem">Add</el-button>
    <el-switch
      v-model="isDark"
      @change="toggleDaek"
      active-text="深色模式"
      inactive-text="浅色模式"
    ></el-switch>
    <el-button @click="storeData">Save</el-button>
  </div>
</template>

<script lang="js">
import Store from 'electron-store'
import { useDark, useToggle } from "@vueuse/core";

export default {
    name: "NeedoTree",
    data(){
      return {
        id: 100,
        needoTreeData: [],
        defaultProps: { 
          children: "children",
          label: "label",
        },
        showRightMenu: false,
        currentItem: null,
        isDark: useDark({
          storageKey: "theme",
          valueDark: "dark",
          valueLight: "light",
        })
      };
    },
    mounted() {
      this.loadData()
    },
    methods: {
      // TODO: 数据导出
      storeData(){
        let option={
            name:"needoTreeData",//文件名称,默认 config
            fileExtension:"json",//文件后缀,默认json
        }
        const store = new Store(option);
        store.set('needoTreeData', this.needoTreeData);
      },
      loadData(){
        let option={
            name:"needoTreeData",//文件名称,默认 config
            fileExtension:"json",//文件后缀,默认json
        }
        const store = new Store(option);
        this.needoTreeData = store.get('needoTreeData');
      },
      leaveMenu(){
        if (this.showRightMenu){
          this.showRightMenu = false
        }
      },
      addNeedoItem(event, data, item){
        let newItem = {id:++this.id, label: "item"+this.id, children:[]};
        if (item) {
          item.children.push(newItem);
        } else {
          this.needoTreeData.push(newItem);
        }
      },
      leftClick(){
        // this.$refs.tree.remove(this.$refs.getNode(data.id))
      },
      nodeClick(data) {
        this.currentItem = data
      },
  
      rightClick(event, data) {
        this.nodeClick(data)
  
        this.showRightMenu = false // 先把模态框关死，目的是：第二次或者第n次右键鼠标的时候 它默认的是true
        this.showRightMenu = true
        let menu = document.querySelector('#menu')
        menu.style.left = event.clientX + 5 + 'px'
        menu.style.top = event.clientY - 5 + 'px'
        // 给整个document添加监听鼠标事件，点击任何位置执行closeRightMenu方法，及时将菜单关闭
        document.addEventListener('click', this.closeRightMenu)
      },
      closeRightMenu() {
        this.showRightMenu = false
        // 及时关掉鼠标监听事件
        document.removeEventListener('click', this.closeRightMenu)
      },
      addDevHandle() {
        if (this.currentItem){
          this.addNeedoItem(null, null, this.currentItem)
        }
      },
      // TODO: 自我编辑
      editDevHandle() {
        if (this.currentItem){
          this.currentItem.label += "edit"
        }
      },
      delDevHandle() {
        if (this.currentItem){
          this.$refs.tree.remove(this.$refs.tree.getNode(this.currentItem.id))
        }
        // console.log(this.needoTreeData)
      },
      kkp(data) {
        console.log(`output->data`, data);
      },

      toggleDaek() {
        useToggle(this.isDark);
      },
    },
  };

</script>

<style lang="scss">
html {
  -webkit-app-region: drag;
  text-align: -webkit-center;
  height: 100%;
  width: 100%;
}

.needo-tree{
  background-color: var(--BaseBackground);
}

button,
.el-switch {
  -webkit-app-region: no-drag;
}

.needo-tree {
  -webkit-app-region: no-drag;
  font-size: 17px;
  margin: 0 30px;
}

.right-menu {
  -webkit-app-region: no-drag;
  z-index: 1;
  position: absolute;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: white;
}
.menu-item {
  line-height: 20px;
  text-align: left;
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}
li:hover {
  background-color: #edf6ff;
  color: #606266;
}

.el-tree-node__content {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
  padding-top: 7px;
}

.el-tree-node__children {
  //调整子项下字体
  .el-tree-node__content {
    // font-size: 1.125rem; /* 18px */
    // line-height: 1.75rem; /* 28px */
  }
}

.needoContent {
  width: 100%;
  text-align: left;
  border-bottom: var(--LightBorder) 1.5px solid;
}

.title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  display: flex;
  justify-content: center;
  .titleText {
    font-weight: 600;
    overflow: hidden;
    color: var(--PrimaryText);
    width: 5ch;
    animation: onload 2.5s steps(4, end);
  }
  .placeholder {
    opacity: 0;
    animation: flicker 1s steps(2, end) infinite;
    animation-iteration-count: 5;
  }
}

@keyframes flicker {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes onload {
  0% {
    width: 1ch;
  }
  100% {
    width: 5ch;
  }
}
</style>
